<template>
  <div>
    <div class="user">
      <!-- 用户页头部开始 -->
      <div class="user-card">
        <!-- 用户信息区 -->
        <div class="user-infos" v-for="(item,i) of userinfo" :key="i">
          <div class="user-avatar">
            <van-image
              round
              width="5rem"
              height="5rem"
              :src="`${baseURL}/avatar/1.png`"
            >
            </van-image>
          </div>
          <div class="user-info">
            <span class="username">{{item.username}}</span>
            <router-link to="#">个人信息 >></router-link>
          </div>
        </div>
        <!-- 签到积分 -->
        <div class="sign-in">
          <span>签到领积分</span>
        </div>
        <!-- 用户资产 -->
        <van-row class="user-asset" type="flex" justify="space-around">
          <van-col span="8">
            <p>3</p>
            <span>可用卡</span>
          </van-col>
          <van-col span="8">
            <p>{{userinfo.length==0?0:userinfo[0].wallet}}</p>
            <span>余额</span>
          </van-col>
          <van-col span="8">
            <p>3</p>
            <span>不可用卡</span>
          </van-col>
        </van-row>
      </div>
      <!-- 用户页头部结束 -->

      <!-- 订单开始 -->
      <div class="order">
        <div class="order-header">
          <span>我的订单</span>
          <router-link to="/state">
            查看全部订单
            <van-icon name="arrow" />
          </router-link>
        </div>
        <div class="order-details">
          <van-grid :border="false">
            <van-grid-item to="/state/1">
                <van-image width="50px" src="images/self/dfk.png" />待付款
            </van-grid-item>
            <van-grid-item to="/state/2">
              <van-image width="50px" src="images/self/dfh.png" />待发货
            </van-grid-item>
            <van-grid-item to="/state/3">
              <van-image width="50px" src="images/self/dsh.png" />待收货
            </van-grid-item>
            <van-grid-item to="/state/4">
              <van-image width="50px" src="images/self/thh.png" />售后
            </van-grid-item>
          </van-grid>
        </div>
      </div>
      <!-- 订单结束 -->

      <!--  -->
      <div class="user-serve">
        <van-cell-group>
          <van-cell icon="images/self/lsdd.png" title="历史订单" is-link to="state" />
          <van-cell icon="images/self/nav-019.png" title="地址管理" is-link to="address" />
          <van-cell icon="images/self/nav-020.png" title="客服热线" is-link to="#" />
        </van-cell-group>
      </div>
      <!--  -->
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex"
import {Post} from '../gp'
export default {
  data(){
    return {
      userinfo:[]
    }
  },
  computed:{
    ...mapState(["lid"])
  },
  mounted(){
    if(this.$store.state.id==""&&sessionStorage.getItem("id")==null){
      this.$router.push("/login");
    }else if(this.$store.state.id==""&&sessionStorage.getItem("id")){

      this.$store.commit('setId',sessionStorage.getItem("id"));
      this.$store.commit('setUname',sessionStorage.getItem("username"));
      this.$store.commit('setIslogin',sessionStorage.getItem("islogin"));
      this.$store.commit('setWallet',sessionStorage.getItem("wallet"));
      

      let data={};
      data.lid=this.$store.state.id;
      console.log(data)
      Post('/user/details',data).then(result=>{
          console.log(result.data.data[0])
          let dlinfo=result.data.data[0];
          if(result.data.code == 200){
            this.userinfo=result.data.data;
            this.$store.commit('setWallet',dlinfo.wallet);
          }else{
            this.$toast("未查询到用户");
          }
        })      
    }else if(this.$store.state.id&&sessionStorage.getItem("id")){
 
      let data={};
      data.lid=this.$store.state.id;
      console.log(data)
      Post('/user/details',data).then(result=>{
          console.log(result)
          if(result.data.code == 200){
            this.userinfo=result.data.data;
            console.log(this.userinfo)
          }else{
            this.$toast("未查询到用户");
          }
        })   
    }
  },
  methods:{

  }
}
</script>

<style scoped lang="scss">
@import "../assets/scss/user.scss"
</style>